<template>
	<!-- #ifdef APP-NVUE -->
	<cell>
		<!-- #endif -->
		<view class="mail-personnel-list" @click="clickList">
			<slot>
				<image class="img" :src="info.user_avatar" mode=""></image>
			</slot>
			<view class="personnel-info">
				<view class="info">
					<view class="one">
						<view class="name">
							{{ info.user_name }}
						</view>
						<view class="tpl">
							{{ info.user_phone }}
						</view>
					</view>
					<view class="two">
						{{ info.user_job }} 
					</view>
				</view>
				<image class="personnel-info-img" src="@/static/images/common/phone.svg" mode="" @click.stop="call"></image>
			</view>
		</view>
	<!-- #ifdef APP-NVUE -->
	</cell>
	<!-- #endif -->
</template>

<script>
	export default {
		name: 'MailPersonnelList',
		props: {
			info: {
				type: Object,
				default: () => ({
					user_avatar: require('@/static/images/common/people.png'),
					user_job: '总经理',
					user_name: '张三',
					user_phone: '13659592159'
				})
			}
		},
		methods: {
			call() {
				uni.showModal({
					title: '拨打电话',
					content: `是否给${this.info.user_name} (${this.info.user_phone})拨打电话？`,
					success: (res) => {
						if (res.confirm) {
						    uni.makePhoneCall({
								phoneNumber: this.info.user_phone,
							});
						} else if (res.cancel) {
						}
					}
				})
			},
			clickList() {
				uni.navigateTo({
					url: '/pages/management/peopledetail?id=1',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mail-personnel-list {
		display: flex;
		align-items: center;
		padding: 10px 0;
		
		box-sizing: border-box;
		.img {
			width: 100rpx;
			height: 100rpx;
			margin-right: 50rpx;
			border-radius: 50%;
		}
		.personnel-info {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				
				font-size: 12px;
				
				color: #999999;
				.one {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 5px;
					.name {
						font-size: 14px;
						
						color: $uni-text-color;
					}
				}
			}
			&-img {
				width: 50rpx;
				height: 50rpx;
				margin-left: 130rpx;
			}
		}
	}
</style>
